<template>
    <div class="container">
        <el-breadcrumb separator="->" class="bread">
            <el-breadcrumb-item><a href="/">首页</a></el-breadcrumb-item>
            <el-breadcrumb-item>订单管理</el-breadcrumb-item>
        </el-breadcrumb>
        <el-upload
            class="upload-demo"
            :action="url"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            multiple
            :limit="1"
            name="orderlist"
            :on-success="upload"
            :on-error="error"
            style="width:300px"
            :on-exceed="handleExceed"
            :file-list="fileList">
            <el-button size="small" type="primary">点击上传</el-button>
        </el-upload>
        <br>
        <el-date-picker
            v-model="searchData"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="getValue"
            :picker-options="pickerOptions2">
        </el-date-picker>
        <el-dropdown size="medium" split-button type="primary" @command="chooseAccount">
            {{this.text}}
            <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="所有账号">所有账号</el-dropdown-item>
                <el-dropdown-item v-for="item in accounts" :key="item.id" :command="item.user">{{item.user}}</el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>
        <el-button type="success" round @click="getSearch">搜索</el-button>
        <div>
            <h1>订单统计</h1>   
            <el-table
                :data="groupByData"
                border
                style="width:1021px"
            >
                <el-table-column
                    label="账号" 
                    prop="user"
                    width="170" >
                </el-table-column>
                <el-table-column
                    label="数量" 
                    prop="SUM(pcs)"
                    width="170" >
                </el-table-column>
                <el-table-column
                    label="平方米" 
                    prop="SUM(square)"
                    width="170" >
                </el-table-column>
                <el-table-column
                    label="总计" 
                    prop="SUM(total)"
                    width="170" >
                </el-table-column>
                <el-table-column
                    label="币种" 
                    prop="currency"
                    width="170" >
                </el-table-column>
                <el-table-column
                    label="人民币" 
                    prop="rmb"
                    width="170" >
                </el-table-column>
            </el-table>
        </div>
        <h1>订单详情</h1>
        <div id="orderlist">
            <el-table
                :data="tableData"
                border
                max-height='700'
                style="width: 95%">
                <!-- <el-table-column
                    label='序号'
                    width="80">
                    <template slot-scope="scope">
                        <span v-text="scope.row.id"></span>
                    </template>
                </el-table-column> -->
                <el-table-column 
                    v-for="(item,index) in tableNames" 
                    :key="index" 
                    :prop="sqlNames[index]" 
                    :label="item" 
                    width="170" >
                </el-table-column>
                <el-table-column
                    fixed="right"
                    label="操作"
                    width="100">
                    <template slot-scope="scope">
                        <el-button @click="deleteItem(scope.row)" type="text" size="medium" v-if="false">删除</el-button>
                        <el-button @click="changeItem(scope.row)" type="text" size="medium">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                @current-change="handleCurrentChange"
                :current-page.sync="currentPage"
                :page-size="20"
                layout="prev, pager, next, jumper"
                :total="totals">
            </el-pagination>
      </div>
    </div>
</template>
<script>
import {getSessionStore} from '../../components/util/util.js'

export default {
    data(){
        return {
            fileList:[],
            text:'所有账号',
            startTime:'',
            endTime:'',
            searchData:[],
            groupByData:[],
            url:'http://'+this.IP+'/api/upload_orderlist.php',
            tableData:[],
            tableNames:[
                '下单时间',
                '交易号',
                '物品SKU',
                '物品名称',
                '数量',
                '平米数',
                '销售单价',
                '订单运费',
                '交易手续费',
                '总计',
                '币种',
                '国家',
                'Coutrycode',
                '订单号',
                '快递方式',
                '付款方式',
                '销售渠道',
                '账号',
                '销售站点'
            ],
            sqlNames:[
                'strtime',
                'tradeid',
                'sku',
                'product',
                'pcs',
                'square',
                'price',
                'extra',
                'charge',
                'total',
                'currency',
                'country',
                'countrycode',
                'orderid',
                'express',
                'paymethod',
                'channel',
                'user',
                'site'
            ],
            accounts:{},
            totals:0,
            pickerOptions2: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                    picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                    picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                    picker.$emit('pick', [start, end]);
                    }
                }]
            },
            currentPage:1,
            m:''
        }
    },
    created(){
        if(sessionStorage.getItem('name') && sessionStorage.getItem('loginkey')){
            if(getSessionStore('type') != 'A'){
                this.$alert('无权查看', ' ', {
                confirmButtonText: '确定',
                callback: action => {
                    location.href="http://www.guolinyu.com"
                }
                });
            }
        }else{
            this.$router.push('/login')
        }

        this.$http.get('http://'+this.IP+'/api/getAccount.php')
            .then(res=>{
                this.accounts = res.data
            })
    },
    mounted(){
        this.getOrderlist()
    },
    methods:{
        handleCurrentChange(){
            if(this.endTime){
                this.getSearch()
            }else{
                this.getOrderlist()
            }
        },
        deleteItem(row){
            console.log(row.id)
        },
        changeItem(row){
            this.$router.push({
                name:'EditOrder',
                params:{
                    item:row,
                    id:row.orderid
                }
            })
        },
        getSearch(){
            this.m = 'search'
            let params = new URLSearchParams();
            params.append('startTime', this.startTime||'');
            params.append('endTime', this.endTime||'');
            params.append('account', this.text == '所有账号'?'':this.text);
            params.append('m',this.m);
            params.append('currentPage',this.currentPage);

            this.$http.post('http://'+this.IP+'/api/getOrderlist.php',params)
                .then(res=>{
                    console.log(res.data)
                   this.tableData = res.data.data
                   this.totals = res.data.total
                   this.groupByData = res.data.data_gb
                })
        },
        chooseAccount(command){
            this.text = command
        },
        getValue(val){
            this.startTime = val[0].getTime()
            this.endTime = val[1].getTime()+24*60*60*1000
        },
        getSummaries(param){
            const { columns, data } = param;
            const sums = [];
            columns.forEach((column, index) => {
                if (index === 0) {
                    sums[index] = '总计';
                    return;
                }
                const values = data.map(item => Number(item[column.property]));
                if (!values.every(value => isNaN(value))) {
                    if(index === 3 || index === 4 || index === 6 || index === 7 || index === 8)
                    sums[index] = values.reduce((prev, curr) => {
                    const value = Number(curr);
                        if (!isNaN(value)) {
                            return prev + curr;
                        } else {
                            return prev;
                        }
                    }, 0);
                    // sums[index] += ' 元';
                } else {
                    sums[index] = '';
                }
            });

            return sums;
        },
        getOrderlist(){
            let params = new URLSearchParams();
            params.append('currentPage', this.currentPage);
            params.append('m',this.m);
            
            this.$http.post('http://'+this.IP+'/api/getOrderlist.php',params)
                .then(res=>{
                    console.log(res.data)
                    this.tableData = res.data.data
                    this.totals = res.data.total
                    this.groupByData = res.data.data_gb
                })
        },
        upload(res,file,fileList){
            let result = res.data;
            console.log(res);
            this.$message({
                message: '上传成功',
                type: 'success'
            });
        },
        error(err, file, fileList){
            console.log(err)
        },
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        handlePreview(file) {
            console.log(file);
        },
        handleExceed(files, fileList) {
            this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
        },
        beforeRemove(file, fileList) {
            return this.$confirm(`确定移除 ${ file.name }？`);
        },
        transTo(str){
          return this.nameList[str];
        },
        getFile(e){
            this.upfile = e.target.files[0];
        },
    }
}
</script>
<style lang="less" scoped>
    .container{
        // max-width: 90%;
        // margin: 0 auto;
        .bread{
            margin: 20px 0;
        }
        #orderlist{
            margin: 10px 0;
        }
        .el-pagination{
            width: 95%;
            display: flex;
            justify-content: flex-end;
            margin-top: 20px;
        }
    }
</style>
